<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backbone</title>
    <script src="jquery/jquery-1.11.2.js"></script>
    <script src="underScore/underscore.js"></script>
    <script src="backbone-min.js"></script>
</head>
<body>
    <button id="check">新手报道</button>
    <ul>
        <li>直接创建对象</li>
        <li>够构造函数添加实例方法和静态方法</li>
        <li>继承操作  extend</li>
        <li>自定义事件</li>
        <li>数据与服务器</li>
        <li>路由与历史管理</li>
        <li>事件委托</li>
        <li>前端模板</li>
    </ul>
    <ul id="list">

    </ul>
    <script>
        (function($){
            World = Backbone.Model.extend({
                content:null,
                name:null
            });
            Worlds = Backbone.Collection.extend({
                initialize:function(models,options){
                    this.bind('add',options.view.addOneWorld);
                }
            });
            AppView = Backbone.View.extend({
                el:$('body'),
                initialize:function(){
                    this.worlds = new Worlds(null,{view:this})
                },
                events:{
                    "click #check" : "checkIn",
                },
                checkIn:function()
                {
                    var world_name = prompt('请问 where ');
                    if(world_name =="") world_name ="未知";
                    var content = $("#check").text();
                    var world = new World({name:world_name,content:content});
                    this.worlds.add(world);
                },
                addOneWorld:function(model)
                {
                    $('#list').append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候：hello world！"+model.get('content')+"</li>");
                }
            })
            var appView = new AppView;
        })(jQuery);
    </script>
</body>
</html>